<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout">
<head th:replace="dashboard/header :: header"></head>
<body>
	<div layout:fragment="content">
	
		<style type="text/css">
			table.dataTable thead th, table.dataTable thead td{
				border-bottom: 1px solid #ddd;	
				text-align:center ;
			}	
			table.dataTable tfoot th, table.dataTable tfoot td{
				border-top: 1px solid #ddd;	
			}
			
			/* datatable */
			.dataTables_wrapper .dataTables_paginate .paginate_button{
				border: 0px;	
			}
			.dataTables_wrapper .dataTables_paginate .paginate_button.current, .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
				background: #3f51b5;	
				border: 0px;
				color: #ffff !important ; 
				padding: 0.3em 1em; 
			}
			.dataTables_wrapper .dataTables_paginate .paginate_button:hover{
				padding: 0.3em 1em; 
				border: 0px;
			}
			.form-control{
				border-radius: 2px;
				box-shadow: none;
				border-color: #dddddd;
				padding: 8px 12px;
			}
			.form-group{
				margin-right:20px;	
			}
			.component-section{
				margin-top:20px ;	
			}
			label {
				margin-right: 5px;
			}
			table.dataTable{
				line-height:1.8 ; 	
			}
		</style>
		
	<!-- nav_start -->
	<ol class="breadcrumb">
	  <li class="breadcrumb-item">基础平台</li>
	  <li class="breadcrumb-item">监管按理</li>
	  <li class="breadcrumb-item active">系统预警</li>
	</ol>
	<!-- nav_end -->
		
		<div class="container-fluid">
          <div class="animated fadeIn">
            <div class="row">
              <div class="col-lg-12">
             
             	<div class="card">
                  
                  <div class="card-body">
                    <form class="form-inline" id="AlinesnoSearchForm" action="" method="post">
                   	
                      <div class="form-group">
                        <label for="exampleInputName2">应用名称</label>
                        <input class="form-control" name="condition[applicationName|like]" id="exampleInputName2" type="text" placeholder="应用名称">
                      </div>
                      
                      <div class="form-group">
                        <label for="exampleInputEmail2">状态</label>
                        <input class="form-control" name="condition[hasStatus]"  id="exampleInputEmail2" type="text" placeholder="状态">
                      </div>
                      
                      <button  type="button" onclick="search(this)"  class="btn btn-primary">搜索</button>
                      
                    </form>
                  </div>
                  
                </div> 
              
                <div class="card">
                  <div class="card-body">
                   		<table id="datatables" class="display" style="width: 100%">
								<thead>
									<tr>
										<th width="30px">序号</th>
										<th width="40px">图标</th>
										<th>应用名称</th>
										<th>应用描述</th>
										<th>应用链接</th>
										<th>菜单权限</th>
										<th width="90px">状态</th>
										<th width="150px">修改时间</th>
									</tr>
								</thead>
								<tbody>
										
								</tbody>
								<tfoot>
									<tr>
										<th>序号</th>
										<th>图标</th>
										<th>应用名称</th>
										<th>应用描述</th>
										<th>应用链接</th>
										<th>菜单权限</th>
										<th>状态</th>
										<th>修改时间</th>
									</tr>
								</tfoot>
							</table> 
                  </div>
                </div>
              </div>
              <!-- /.col-->
            </div>
            <!-- /.row-->
          </div>
        </div>
	</div>

	<script th:src="@{/asserts/vendors/jquery/js/jquery.min.js}"></script>
	<script th:src="@{/asserts/vendors/datatables/datatables.js}"></script>
	<script th:src="@{/asserts/vendors/layer/layer.js}"></script>
	
	<script type="text/javascript">
	
			// key event
			function enterSearch(){
				$('#AlinesnoSearchForm input').each(function() {
					$(this).keyup(function(event){
					  if(event.keyCode ==13){
						  search() ; 
					  }
					});
				});
			}
	
			$(document).ready(function() {
				enterSearch() ; 
				dataTable = $('#datatables').DataTable({
					"processing": true,
					"serverSide": true,
					"ajax": {
						"url": ctx+"boot/platform/application/datatables",
						"type":"POST" , 
						"data": function(d){
							var searchParams = paramsBuilder() ; 
							if(searchParams){
								$.extend(d , searchParams); // 添加扩展参数 
							}
						}
					} , 
					"searching" : false, 
					"lengthMenu": [10, 20, 30, 50],
					"displayLength": 10,
					"scrollX": true ,
					"responsive": true ,
					"columns": [
						{ "data": "id" } ,        
						{ "data": "applicationIcons" } ,        
						{ "data": "applicationName" } ,        
						{ "data": "applicationDesc" } ,
						{ "data": "applicationLink" } ,        
						{ "data": "id" } ,        
						{ "data": "hasStatusLabel" } ,
						{ "data": "updateTime" } 
					],
					columnDefs : [
		            	  {    
		            		  "targets" : 0, //操作按钮目标列
							  "render" : function(data, type,row , meta) {
								  return meta.row + 1 +  meta.settings._iDisplayStart;							  
		            	  	  }
		            	  } ,
		            	  {    
		            		  "targets" : 1, //操作按钮目标列
							  "render" : function(data, type,row , meta) {
								  return '<i class="fa '+data+'" aria-hidden="true">' ; 
		            	  	  }
		            	  } , 
		            	  {    
		            		  "targets" : 5, //操作按钮目标列
							  "render" : function(data, type,row , meta) {
								  return '<a href="javascript:showMenus()"><i class="fa fa-leaf" aria-hidden="true"> 查看功能 </a>' ; 
		            	  	  }
		            	  } ,
		            	  {    
		            		  "targets" : 6, //操作按钮目标列
							  "render" : function(data, type,row , meta) {
								  console.log("row.hasStatus" + row.hasStatus) ; 
								  var id = '"' + row.id + '"';
								  var html = "" ; 
			   		           	  if(row.hasStatus == 1){
									  html += "<a style='cursor:pointer;margin-left:10px;color:red' href='javascript:changeStatus("+id+");'><i class='fa fa-cloud-download'></i> 禁用</a>" ; 
			   		           	  }else{
									 html += "<a style='cursor:pointer;margin-left:10px;' href='javascript:changeStatus("+id+");'><i class='fa fa-cloud-upload'></i> 启用</a>" ; 
			   		           	  }
			   		           	  return html;
		            	  	  }
		            	  } 
			        ],
			        "createdRow": function( row, data, dataIndex ) {
	                    $(row).attr('style', 'text-align: center;')
	                    $(row).children('td').eq(2).attr('style', 'text-align: left;')
	                    $(row).children('td').eq(3).attr('style', 'text-align: left;')
	                },
					"language": {
						"processing": "处理中...",
						"lengthMenu": "显示 _MENU_ 项结果",
						"zeroRecords": "没有找到相应的结果",
						"info": "第 _START_ 至 _END_ 行，共 _TOTAL_ 行",
						"infoEmpty": "第 0 至 0 项结果，共 0 项",
						"infoFiltered": "(由 _MAX_ 项结果过滤)",
						"infoPostFix": "",
						"search": "搜索:",
						"searchPlaceholder": "请输入要搜索内容...",
						"url": "",
						"thousands": "'",
						"emptyTable": "表中数据为空",
						"loadingRecords": "载入中...",
						"infoThousands": ",",
						"paginate": {
							"first": "首页",
							"previous": "上页",
							"next": "下页",
							"last": "末页"
						}
					},
					"dom": '<"toolbar">frtip'
				});
				
				$("div.toolbar").html('<b>'+
						'<button type="button" onclick="deleteMultipleItem()" class="btn btn-primary" style="float:right;margin-right:10px">删除</button>'+
						'<button type="button" onclick="modifyItem()" class="btn btn-primary" style="float:right;margin-right:10px">修改</button>'+
						'<button type="button" onclick="addItem()" class="btn btn-primary" style="float:right;margin-right:10px">添加</button>'+
						'<button type="button" onclick="buildMenus()" class="btn btn-primary" style="float:right;margin-right:10px">菜单</button>'+
						'</b>');
			
				// 单选
				$('#datatables tbody').on( 'click', 'tr', function () {
					if ( $(this).hasClass('selected') ) {
						$(this).removeClass('selected');
					} else {
						dataTable.$('tr.selected').removeClass('selected');
						$(this).addClass('selected');
					}
				});
			 
			});
		
		/**
		 * get params
		 */
		function paramsBuilder() {
		    var param = {} ;
		    $('#AlinesnoSortPanel input').each(function() {
		        if ($(this).val() != '' && this.name != '') {
		            param[this.name] = this.value;
		        }

		    });
		    
		    $('#AlinesnoSearchForm input').each(function() {
		        if ($(this).val() != '' && this.name != '') {
		            param[this.name] = this.value;
		        }

		    });
		    
		    $('#trainingSearchForm .selectpicker').each(function() {
		        console.log('value = ' + this.value + ' , value = ' + $(this).val());
		        if ($(this).val() != null &&  $(this).val() != '' && this.name != '') {
		            param[this.name] = $(this).val() ;
		        }
		    });
		    return param ;
		}
		
		//搜索
		function search(btn){
			$('#datatables').dataTable().fnDraw(false);
		}
		
		function addItem(){
			layer.open({
			  type: 2,
			  title: '添加',
			  shadeClose: true,
			  shade: 0.8,
			  maxmin: true, //开启最大化最小化按钮
			  area: ['700px', '650px'],
			  content: ctx + 'boot/platform/application/add' , 
			  end: function () {
				  search(null) ; 
	          }
			});	
		}
		
		function buildMenus(){
			
			var selectRows = $('#datatables').DataTable().rows('.selected').data() ; 
			if(selectRows.length == 0){
				layer.alert("编辑请选择元素.")
				return ; 
			}
			
			if(selectRows.length > 1){
				layer.alert("编辑请选择一条元素.")
				return ; 
			}
			var row = selectRows[0] ; 
			
			layer.open({
				type : 2,
				title : '菜单管理',
				shadeClose : true,
				shade : 0.8,
				area : [ '50%', '80%' ],
				content : ctx+'boot/platform/application/menus?applicationId=' + row.id ,
				end: function () {
					  search(null) ; 
				}
			});		
		}
		
		// 删除多元素
		function deleteMultipleItem(){
			var selectRows = $('#datatables').DataTable().rows('.selected').data() ; 
			var rowsId = new Array(); 
			for(var i = 0 ; i < selectRows.length ; i ++){
				rowsId.push(selectRows[i].id) ; 
			}
			
			var confirmWindow = layer.confirm('请确认是否删除？', {
			  btn: ['删除','取消'] //按钮
			}, function(){
				$.post(ctx+"boot/platform/application/delete" , {rowsId:rowsId} , function(response){
					console.log('response = ' + response) ; 
					layer.close(confirmWindow) ; 
					if(response.code == 200){
						search() ; 
					}
				})	
			});
		}
		
		// 修改单个元素
		function modifyItem(){
			var selectRows = $('#datatables').DataTable().rows('.selected').data() ; 
			if(selectRows.length == 0){
				layer.alert("编辑请选择元素.")
				return ; 
			}
			if(selectRows.length > 1){
				layer.alert("编辑请选择一条元素.")
				return ; 
			}
			var row = selectRows[0] ; 
			layer.open({
				type: 2,title: '修改',
				shadeClose: true,
				shade: 0.8,
				maxmin: true, 
				area: ['700px', '650px'],
				  content: ctx+'boot/platform/application/modify?id='+row.id ,
				end: function () {
					  search(null) ; 
				}
			});	
		}
		
		function showMenus(){
			var selectRows = $('#datatables').DataTable().rows('.selected').data() ; 
			if(selectRows.length == 0){
				layer.alert("编辑请选择元素.")
				return ; 
			}
			if(selectRows.length > 1){
				layer.alert("编辑请选择一条元素.")
				return ; 
			}
			var row = selectRows[0] ; 
			layer.open({
				type: 2,title: '修改',
				shadeClose: true,
				shade: 0.8,
				maxmin: true, 
				area: ['700px', '650px'],
				  content: ctx+'boot/platform/application/modify?id='+row.id ,
				end: function () {
					  search(null) ; 
				}
			});	
		}
	
		function changeStatus(id){
			$.get(ctx+"boot/platform/application/changeStatus?id="+id, function(response){
				if(response.code == 200){
					$("#datatables").dataTable().fnDraw(false);
				}else{
					layer.alert(response.message) ; 
				}
			},"json") ; 
		}
	</script>

</body>
</html>
